<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input v-model="listQuery.productname" clearable style="width:220px;" class="filter-item" placeholder="服务器型号"/>
      <el-input v-model="listQuery.name" clearable style="width:220px;margin-left: 10px; margin-right: 10px;" class="filter-item" placeholder="规格名称"/>
      <el-button type="primary" class="filter-item" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
      <el-button type="primary" class="filter-item" icon="el-icon-plus" @click="handleCreate">{{ $t('table.add') }}</el-button>
    </div>

    <el-table v-loading="listLoading" :key="tableKey" :data="list" element-loading-text="加载中" border fit highlight-current-row style="width: 100%">
      <el-table-column width="40px" align="center" label="ID">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120px" align="center" label="服务器型号">
        <template slot-scope="scope">
          <span>{{ scope.row.productname }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120px" align="center" label="规格名称">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column width="100px" align="center" label="默认配置">
        <template slot-scope="scope">
          <span>{{ scope.row.numCpus }}c/{{ scope.row.memTotal/1024 }}g/{{ scope.row.diskCapacity }}g</span>
        </template>
      </el-table-column>
      <el-table-column width="140px" align="center" label="CPU颗数/CPU插槽">
        <template slot-scope="scope">
          <span>{{ scope.row.cpuGrainNum }}/{{ scope.row.cpuSlotNum }}</span>
        </template>
      </el-table-column>
      <el-table-column width="140px" align="center" label="内存数量/内存插槽">
        <template slot-scope="scope">
          <span>{{ scope.row.memNum }}/{{ scope.row.memSlotNum }}</span>
        </template>
      </el-table-column>
      <el-table-column width="130px" align="center" label="硬盘数量/总插槽">
        <template slot-scope="scope">
          <span>{{ scope.row.diskNum }}/{{ scope.row.diskSlotNum }}</span>
        </template>
      </el-table-column>
      <el-table-column width="130px" align="center" label="电源数量/总插槽">
        <template slot-scope="scope">
          <span>{{ scope.row.powerNum }}/{{ scope.row.powerSlotNum }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120px" align="center" label="网口数量/总数">
        <template slot-scope="scope">
          <span>{{ scope.row.netNum }}/{{ scope.row.netNum + scope.row.netUseNum }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="90px" label="备注">
        <template slot-scope="scope">
          <span>{{ scope.row.comment }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.actions')" fixed="right" align="center" width="160px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">{{ $t('table.delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="1000px">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px" style="width: 900px; margin-left:5px;">
        <el-row>
          <el-col :span="8">
            <el-form-item label="规格名称" prop="name">
              <el-input v-model="temp.name" :maxlength="100"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服务器类型" prop="productname">
              <el-input v-model="temp.productname" :maxlength="255"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="CPU核数" prop="numCpus">
              <el-input-number v-model="temp.numCpus" :precision="0" :min="1" :max="9999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="内存大小(MB)" prop="memTotal">
              <el-input-number v-model="temp.memTotal" :step="1024" :min="1024" :max="999999999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="硬盘大小(G)" prop="diskCapacity">
              <el-input-number v-model="temp.diskCapacity" :min="1" :max="9999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="CPU型号" prop="cpuModel">
              <el-input v-model="temp.cpuModel" :maxlength="255"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="CPU颗数" prop="cpuGrainNum">
              <el-input-number v-model="temp.cpuGrainNum" :min="1" :max="9999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="CPU插槽数" prop="cpuSlotNum">
              <el-input-number v-model="temp.cpuSlotNum" :min="1" :max="9999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="内存型号" prop="memModel">
              <el-input v-model="temp.memModel" :maxlength="255"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="内存数量" prop="memNum">
              <el-input-number v-model="temp.memNum" :min="1" :max="9999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="内存插槽数" prop="memSlotNum">
              <el-input-number v-model="temp.memSlotNum" :min="1" :max="9999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="硬盘型号" prop="diskModel">
              <el-input v-model="temp.diskModel" :maxlength="255"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="硬盘数量" prop="diskNum">
              <el-input-number v-model="temp.diskNum" :min="1" :max="9999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="硬盘插槽数" prop="diskSlotNum">
              <el-input-number v-model="temp.diskSlotNum" :min="1" :max="9999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="电源型号" prop="powerModel">
              <el-input v-model="temp.powerModel" :maxlength="255"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电源数量" prop="powerNum">
              <el-input-number v-model="temp.powerNum" :min="1" :max="9999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电源插槽数" prop="powerSlotNum">
              <el-input-number v-model="temp.powerSlotNum" :min="1" :max="9999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="网口数量" prop="netNum">
              <el-input-number v-model="temp.netNum" :min="1" :max="9999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="网口已用数量" prop="netUseNum">
              <el-input-number v-model="temp.netUseNum" :min="1" :max="9999" controls-position="right" style="width:180px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作系统" prop="os">
              <el-input v-model="temp.os" :maxlength="255"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="操作系统版本" prop="osrelease">
              <el-input v-model="temp.osrelease" :maxlength="255"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="RAID信息" prop="raidInfo">
              <el-input v-model="temp.raidInfo" :maxlength="255"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="备注">
              <el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.comment" :maxlength="600" type="textarea"	/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">{{ $t('table.confirm') }}</el-button>
        <el-button v-else type="primary" @click="updateData">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, create, update, del } from '@/api/serverStandard'

export default {
  name: 'ComplexTable',
  filters: {},
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        productname: null,
        name: null
      },
      temp: {
        id: undefined,
        name: '', // 规格名称
        productname: '', // 服务器类型
        numCpus: '1', // CPU核数
        memTotal: '2048', // 内存大小
        diskCapacity: '40', // 硬盘大小
        cpuModel: '', // CPU型号
        cpuGrainNum: '', // CPU颗数
        cpuSlotNum: '', // CPU插槽数
        memModel: '', // 内存型号
        memNum: '', // 内存数量
        memSlotNum: '', // 内存插槽数
        diskModel: '', // 硬盘型号
        diskNum: '', // 硬盘数量
        diskSlotNum: '', // 硬盘插槽数
        powerModel: '', // 电源型号
        powerNum: '', // 电源数量
        powerSlotNum: '', // 电源插槽数
        netNum: '', // 网口数量
        netUseNum: '', // 网口已用数量
        os: 'CentOS', // 操作系统
        osrelease: '6.9', // 操作系统版本
        raidInfo: '', // RAID信息
        comment: '' // 备注
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增'
      },
      rules: {
        name: [
          { required: true, message: '规格名称是必填项', trigger: 'blur' }
        ],
        productname: [
          { required: true, message: '服务器类型是必填项', trigger: 'blur' }
        ],
        numCpus: [
          { required: true, message: 'CPU核数是必填项', trigger: 'blur' }
        ],
        memTotal: [
          { required: true, message: '内存大小是必填项', trigger: 'blur' }
        ],
        diskCapacity: [
          { required: true, message: '硬盘大小是必填项', trigger: 'blur' }
        ],
        cpuModel: [
          { required: true, message: 'CPU型号是必填项', trigger: 'blur' }
        ],
        cpuGrainNum: [
          { required: true, message: 'CPU颗数是必填项', trigger: 'blur' }
        ],
        cpuSlotNum: [
          { required: true, message: 'CPU插槽数是必填项', trigger: 'blur' }
        ],
        memModel: [
          { required: true, message: '内存型号是必填项', trigger: 'blur' }
        ],
        memNum: [
          { required: true, message: '内存数量是必填项', trigger: 'blur' }
        ],
        memSlotNum: [
          { required: true, message: '内存插槽数是必填项', trigger: 'blur' }
        ],
        diskModel: [
          { required: true, message: '硬盘型号是必填项', trigger: 'blur' }
        ],
        diskNum: [
          { required: true, message: '硬盘数量是必填项', trigger: 'blur' }
        ],
        diskSlotNum: [
          { required: true, message: '硬盘插槽数是必填项', trigger: 'blur' }
        ],
        powerModel: [
          { required: true, message: '电源型号是必填项', trigger: 'blur' }
        ],
        powerNum: [
          { required: true, message: '电源数量是必填项', trigger: 'blur' }
        ],
        powerSlotNum: [
          { required: true, message: '电源插槽数是必填项', trigger: 'blur' }
        ],
        netNum: [
          { required: true, message: '网口数量是必填项', trigger: 'blur' }
        ],
        netUseNum: [
          { required: true, message: '网口已用数量是必填项', trigger: 'blur' }
        ],
        os: [{ required: true, message: '操作系统是必填项', trigger: 'blur' }],
        osrelease: [
          { required: true, message: '操作系统版本是必填项', trigger: 'blur' }
        ],
        raidInfo: [
          { required: true, message: 'RAID信息是必填项', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 查询服务器规格列表
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    // 查询
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 每页多少条数据
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    // 第几页
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    // 删除数据
    handleDelete(row) {
      this.$confirm('此删除操作不可还原, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          del(row).then(response => {
            this.getList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        })
        .catch(() => {})
    },
    // 添加数据
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 更新数据
    handleUpdate(row) {
      this.temp = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 确认更新数据
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          update(tempData).then(() => {
            this.getList()
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // 确认添加数据
    createData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          console.log(tempData)
          create(tempData).then(() => {
            this.getList()
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    }
  }
}
</script>
